<template>
<!-- 容器 -->
<div>
    <div class="header">
        <span>搜索用户数</span>
        <i class="el-icon-warning-outline"></i>
    </div>
    <div class="main">
        <span class="main-title">1234</span>
        <span class="main-content">1271</span>
        <i class="el-icon-caret-top" style="color: greenyellow"></i>
        <i class="el-icon-caret-bottom" style="color: red"></i>
    </div>
    <div class="footer">
        <div class="charts" ref="charts"></div>
    </div>
    
</div>
  
</template>

<script>
//引入echarts
import * as echarts from 'echarts';
export default{
    name:"",
    mounted(){
        // 初始化echarts实例
        let lineCharts = echarts.init(this.$refs.charts);
        // 配置数据
        lineCharts.setOption({
            yAxis:{
                show:false
            },
            xAxis:{
                show:false,
                type:"category",
                boundaryGap: false,
            },
            grid:{
                left:0,
                top:0,
                right:0,
                bottom:0,
            },
            series:[
                {
                    type:"line",
                    data:[10,12,8,25,7,33],
                    smooth:true,
                    // 拐点样式
                    itemStyle:{
                        opacity:0
                    },
                    // 线条的颜色
                    lineStyle:{
                        color:"green"
                    },
                    // 区域填充颜色
                    areaStyle:{
                        color:{
                            type:"linear",
                            x:0,
                            y:0,
                            x2:0,
                            y2:1,
                            colorStops:[
                                {
                                    offset:0,
                                    color:"green", // 0%处的颜色
                                },
                                {
                                    offset:1,
                                    color:"#fff" // 100%处的颜色
                                },
                            ],
                            global:false,//缺省为false
                        }
                    }
                }
            ]
        })
    }
}
</script>

<style scoped>
.header{
    display:flex;
    align-items:center;
}
.search-header{
    margin-right:20px;
}
.main{
    margin:10px 0px;
}
.main-title{
    margin-right:30px;
}
.main-content{
    margin-right:10px;
}
.charts{
    height:50px;
    width:100%;
}
</style>